import React from 'react';
import './less/ListTable.less';
import { Space, Table, Button } from 'antd';
import { Link } from 'react-router-dom';

// 要真正从后端拿数据，替换掉这个data数组
const data = [
    {
        key: '1',
        name: 'John Brown',
        address: 'New York No. 1 Lake Park',
    },
    {
        key: '2',
        name: 'Jim Green',
        address: 'London No. 1 Lake Park',
    },
    {
        key: '3',
        name: 'Joe Black',
        address: 'Sidney No. 1 Lake Park',
    },
];

const ListTable = () => {
    // 列的头部
    const columns = [
        {
            dataIndex: 'name',
            key: 'name',
            width: '67%',
            render: (text) => (
                <>
                    <Link className='table_title' to='/'>西游记</Link>
                    <p style={{ color: '#999' }}>孙悟空</p>
                </>
            ),
        },
        {
            dataIndex: 'address',
            key: 'address',
            render: (text) => (
                <div>
                    2022-03-03 20:33:06

                </div>
            ),
        },
        {
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button type='primary'>编辑</Button>
                    <Button type='danger'>删除</Button>
                </Space>
            ),
        },
    ];
    return (
        <div className='list_table'>
            {/* columns 列    dataSource数据  showHeader是否显示表头，传的是布尔值*/}
            <Table showHeader={false} columns={columns} dataSource={data} />
        </div>
    );
};

export default ListTable;


